<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>基本信息</h3>
      <el-form
        ref="projects"
        class="base-info-form"
        :rules="rules"
        :model="businessResult"
        inline
        label-width="150px"
      >
        <!-- <el-form-item label="野外工作年度" prop="resYear">
          <el-date-picker
            v-model="businessResult.resYear"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
          />
        </el-form-item> -->
        <el-form-item label="野外成果名称 ※" prop="resName">
          <span slot="label" class="custom-form-label"
            >野外成果名称 <span>※</span></span
          >
          <el-input v-model="businessResult.resName" />
        </el-form-item>
        <el-form-item label="成果认定单位 ※" prop="resReserve1">
          <span slot="label" class="custom-form-label"
            >成果认定单位 <span>※</span></span
          >
          <el-input v-model="businessResult.resReserve1" />
        </el-form-item>
        <el-form-item label="成果认定等级 ※" prop="resLevel">
          <span slot="label" class="custom-form-label"
            >成果认定等级 <span>※</span></span
          >
          <el-select
            v-model="businessResult.resLevel"
            clearable
            placeholder="成果认定等级"
          >
            <el-option
              v-for="item in levelMapArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="级别对应工作内容" prop="resLevelInfo">
          <el-input v-model="businessResult.resLevelInfo" />
        </el-form-item>
        <el-form-item label="野外工作开始时间" prop="resPassDate">
          <el-date-picker
            v-model="businessResult.resPassDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="野外工作结束时间" prop="resFinishDate">
          <el-date-picker
            v-model="businessResult.resFinishDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item> -->
        <!-- <el-form-item label="标准编号" prop="resMark">
          <el-input v-model="businessResult.resMark" />
        </el-form-item> -->
        <el-form-item label="依托项目" prop="resWithProjectId">
          <el-select
            v-model="businessResult.resWithProjectId"
            clearable
            multiple
            filterable
            placeholder="依托项目"
          >
            <el-option
              v-for="item in projectList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="野外工作状态" prop="resReserve2">
          <el-input v-model="businessResult.resReserve2" />
        </el-form-item> -->
        <el-form-item label="备注" prop="resRemark" class="form-item-textarea">
          <el-input
            type="textarea"
            :rows="4"
            v-model="businessResult.resRemark"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card people-card">
      <file-info nowAction="edit" ref="fileInfo"></file-info>
    </el-card>
    <el-card class="box-card people-card">
      <person-info ref="personInfo"></person-info>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">保存</el-button>
    </div>
  </div>
</template>
<script>
import { levelMapArr, personDutyOptions } from '@/utils/commonData'
import { projectList } from '@/api/technology-project/project-manage'
import { resultDetail, updateResult } from '@/api/technology-result/result'
import PersonInfo from '@/components/PersonInfo'
import FileInfo from '@/components/FileInfo'
import { MessageBox } from 'element-ui'

export default {
  name: 'GoodsCreate',
  components: {
    PersonInfo,
    FileInfo
  },
  data() {
    return {
      levelMapArr,
      personDutyOptions,
      businessResult: {
        owningModule: 13,
        resYear: '',
        resName: '',
        resReserve2: '',
        resLevel: '',
        resLevelInfo: '',
        resPassDate: '',
        resFinishDate: '',
        resWithProjectId: [],
        resReserve1: '',
        resRemark: ''
      },
      projectList: [],
      rules: {}
    }
  },
  created() {
    this.getProjectList()
    this.init()
  },
  methods: {
    init: function () {
      if (this.$route.query.resId == null) {
        return
      }
      let params = {
        resId: this.$route.query.resId
      }
      resultDetail(params).then((response) => {
        let resData = { ...response.data.data }
        this.businessResult = { ...resData.businessResult }
        this.businessResult.resWithProjectId =
          this.businessResult.resWithProjectId.split(',')
        this.$refs.personInfo.personList = resData.personList.map(
          (el, index) => {
            el.index = index
            return el
          }
        )
        this.$refs.fileInfo.projectFileList = resData.projectFileList.map(
          (el, index) => {
            el.index = index
            return el
          }
        )
      })
    },
    getProjectList() {
      projectList(this.listQuery)
        .then((response) => {
          this.projectList = response.data.data.list
        })
        .catch(() => {
          this.projectList = []
        })
    },
    handleCancel: function () {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: '/field-exploration-result'
      })
    },
    handlePublish: function () {
      const finalProjects = {
        businessResult: { ...this.businessResult },
        personList: this.$refs.personInfo.personList,
        projectFileList: this.$refs.fileInfo.projectFileList
      }
      finalProjects.businessResult.resWithProjectId =
        finalProjects.businessResult.resWithProjectId.join(',')
      let checkBusinessProject =
        this.businessResult.resName == '' ||
        this.businessResult.resReserve1 == '' ||
        this.businessResult.resLevel == ''
      if (checkBusinessProject) {
        this.$notify.error({
          title: '失败',
          message: '基本信息中带 “ ※ ” 为必填项，请填写后再保存'
        })
        return
      }
      function checkProjectFile(el) {
        return el.fileName == '' || el.fileRemark == ''
      }
      if (finalProjects.projectFileList.some(checkProjectFile)) {
        this.$notify.error({
          title: '失败',
          message: '成果归档中 “ 文件名称、备注 ” 为必填项，请填写后再保存'
        })
        return
      }
      function checkPersonList(el) {
        return (
          el.personName == '' ||
          el.personLearnLevel == '' ||
          el.personSpecial == '' ||
          el.personJobTitle == '' ||
          el.personDuty == '' ||
          el.personRank == undefined ||
          el.personRank == ''
        )
      }
      if (finalProjects.personList.some(checkPersonList)) {
        this.$notify.error({
          title: '失败',
          message:
            '项目成员信息中 “ 姓名、学历、专业、职称、担任角色、成员排名 ” 为必填项，请填写后再保存'
        })
        return
      }
      updateResult(finalProjects)
        .then((response) => {
          this.$notify.success({
            title: '成功',
            message: '修改成功'
          })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({
            path: '/field-exploration-result'
          })
        })
        .catch((response) => {
          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/business-public.scss';
</style>
<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  width: 145px;
  height: 145px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>
